<!doctype html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>编辑资料</title>
    <link rel="stylesheet" href="/static/app/lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="/static/app/css/style.css">
    <script src="/static/app/lib/zy.rem.js"></script>
    <script src="/static/app/lib/jquery1.12.3.min.js"></script>
    <script src="/static/app/js/base.js"></script>
    <link rel="stylesheet" href="/static/app/css/core.css">
    <style>
        .add{
            width: 64%;
            height: 0.4rem;
            margin-left: 0.6rem;
            background:transparent;
            border:none;
            outline:medium;
        }
        .lad{
            margin-left: 0.6rem;
            color: #000;
            font-size: 0.25rem;
        }
        .info-links{
            margin-top: 0.5rem;
        }
        .button_lar{
            width: 90%;
            height: 0.7rem;
            margin-left: 5%;
            margin-top: 2rem;
            color: #fff;
            font-size: 0.3rem;
            border: 0;
            border-radius:0.1rem;
            background-color: #0b76ac;
            outline:none;
        }
        .toxian{
            margin-left: 0.55rem;
            opacity: 0;
        }
        .abs{
            width: 20%;
            height: 0.5rem;
            margin-left: 5%;
            color: #fff;
            font-size: 0.3rem;
            border: 0;
            border-radius:0.1rem;
            background-color: #0b76ac;
            outline:none;
            position:absolute;
            top: 0.3rem;
            left: 1rem;
        }
        .toux{
           position: relative;
        }
    </style>
</head>
<body>
<div class="header">
    <div><a href="{:url('Core/index')}">
        <img src="/static/app/img/fanh.png"></a></div>
    <div>个人资料</div>
    <div></div>
    <!--<div><a href="javascript:;" class="head-btn iconfont">&#xe765;</a></div>-->
</div>
<div class="center">
    <form action="{:url('upUser')}" enctype="multipart/form-data"  method="post">

    <div class="info">
        <!--<div class="info-tou"><img src="/static/app/img/toux.png" /></div>-->
        <div class="info-tou" id="fileList">
            <img src="{if $data.head!=null}{$data.head}{else}/static/app/img/toux.png{/if}" id="fileimg" onclick="toux_button()">
            <input class="toxian"  type="file" onChange="handleFiles(this,0)" name="img_head" accept="image/*">
        </div>
        <h3>{$Think.session.appuser.nickname}</h3>
    </div>
    <div class="info-links">

        <a href="javascript:;">昵称
            <input type="text" class="add" name="nickname" value="{$data.nickname}" required="ture" placeholder="请输入昵称">
        </a>
        <a href="javascript:;">性别
            <label class="lad" ><input type="radio" name="sex"  {if $data.sex=="1"}checked="checked"{/if} value="1" >男生</label>
            <label class="lad"><input type="radio" name="sex"  {if $data.sex=="2"}checked="checked"{/if} value="2">女生</label>
        </a>
        <a href="javascript:;">手机号码 {$data.phone}</a>
        <a href="javascript:;">
        <button class="button_lar">保存</button>
        </a>
    </div>
    </form>

</div>
</body>
{include file='public:bottom'}
<script>
    //头像
    window.URL = window.URL || window.webkitURL;
    function handleFiles(obj,id) {
        fileList = document.getElementById("fileList");

        var files = obj.files;
        img = new Image();
        if(window.URL){

            img.src = window.URL.createObjectURL(files[0]); //创建一个object URL，并不是你的本地路径
            img.id ="fileimg";
//            img.width = 50;
//            img.height = 50;
            img.onload = function(e) {
                window.URL.revokeObjectURL(this.src); //图片加载后，释放object URL
            }
            // if(fileList.firstElementChild){
            //     fileList.removeChild(fileList.firstElementChild);
            // }
            // console.log(img.src);
            $('#fileimg').attr("src",img.src);
            // fileList.appendChild(img);
        }else if(window.FileReader){
            //opera不支持createObjectURL/revokeObjectURL方法。我们用FileReader对象来处理
            var reader = new FileReader();
            reader.readAsDataURL(files[0]);
            reader.onload = function(e){
                img.src = this.result;
                img.id ="fileimg";
//                img.width = 50;
//                img.height = 50;
                $('#fileimg').attr("src",img.src);

                // fileList.appendChild(img);
            }
        }else
        {
            //ie
            obj.select();
            obj.blur();
            var nfile = document.selection.createRange().text;
            document.selection.empty();
            img.src = nfile;
            img.id ="fileimg";
//            img.width = 50;
//            img.height = 50;

            img.onload=function(){

            }
            $('#fileimg').attr("src",img.src);

            // fileList.appendChild(img);
        }
    }
    function toux_button(){
        $('.toxian').trigger('click');
    }

</script>
</html>